<template>
  <div id="userInfo" v-loading="editUserLoading">
    <div>
      <div class="df f14" style="margin-bottom: 20px">
        <div class="item">上传头像：</div>
        <div class="form-avatar" @click="handleUpdateAvater">
          <img
            v-if="!userInfo.head"
            class="inactive"
            src="@/assets/images/user-avatar-default.166e35b.png"
            alt=""
          />
          <img
            v-else
            class="inactive"
            :style="{
              width: userInfo.head ? '100%' : '30px',
              marginTop: userInfo.head ? '0px' : '37px',
            }"
            :src="upDateAvatar ? upDateAvatar : avatar"
            alt=""
          />
        </div>
      </div>
      <div class="df" style="margin-bottom: 20px">
        <div class="item">所在省市：</div>
        <div>
          <el-input
            disabled
            v-model="myFormData.s_province"
            style="width: 100px"
          />
          <el-select
            @change="citychange"
            v-model="myFormData.s_city"
            placeholder="请选择城市"
            style="width: 130px; margin: 0 10px"
          >
            <el-option
              v-for="item in cityData"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
          <el-select
            v-model="myFormData.s_district"
            placeholder="请选择区县"
            style="width: 130px"
          >
            <el-option
              v-for="item in county"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
      </div>
      <div class="df" style="margin-bottom: 20px">
        <div class="item">就读中学：</div>
        <div class="df">
          <el-input
            v-model="myFormData.s_school"
            style="max-width: 300px"
            class="input-with-select"
          >
          </el-input>
          <el-input
            disabled
            v-model="myFormData.grade"
            style="width: 100px; margin: 0 10px"
          />
          <div class="df">
            <el-input
              v-model="myFormData.s_class"
              style="width: 50px; margin-right: 10px"
            />
            <span>(班)</span>
          </div>
        </div>
      </div>
      <div class="df" style="margin-bottom: 20px">
        <div class="item">姓名：</div>
        <el-input
          v-model="myFormData.nick"
          placeholder="请输入姓名"
          style="width: 400px"
        />
      </div>
      <div class="df" style="margin-bottom: 20px">
        <div class="item">性别：</div>
        <el-radio-group v-model="myFormData.sex" class="ml-4">
          <el-radio :value="0">男</el-radio>
          <el-radio :value="1">女</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="btns-box">
      <el-button class="btn" @click="handleSubmit">保存</el-button>
    </div>
    <userAvatar
      ref="userAvatarRef"
      @handleUpdateAvatar="handleUpdateAvatar"
      @handleAvatarSubmit="handleAvatarSubmit"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import userAvatar from './userAvatar.vue';
import { EditUser } from '@/api/user';
import { getAreaChilds } from '@/api/provinces/province';
import { ElMessage } from 'element-plus';
const store = useStore();
import { get } from 'lodash';
const upDateAvatar = ref('');
const editUserLoading = ref(false);
const userInfo = ref(get(store.getters, 'user.userInfo', {}));
const userAvatarRef = ref(null);
const grade = ref({
  3: '高三',
  2: '高二',
});
const myFormData = ref({
  sex: userInfo.value.sex * 1,
  nick: userInfo.value.nick,
  s_class: userInfo.value.s_class,
  grade: grade.value[userInfo.value.grade] || '高一',
  s_school: userInfo.value.s_school,
  s_province: userInfo.value.province,
  s_city: userInfo.value.s_city,
  s_district: userInfo.value.s_district,
});
const isChangeAvatar = ref(false);
const avatar = ref(
  'https://mcdn.chatgk.com' + store.getters.user.userInfo.head,
);

const county = ref([]);
const cityData = ref([]);
const fetchAreaChilds = () => {
  getAreaChilds({ pid: userInfo.value.pid }).then((res) => {
    if (res.data.code == 20000) {
      cityData.value = res.data.data[0].childs;
      if (myFormData.value.s_province !== userInfo.value.s_province) {
        myFormData.value.s_city = cityData.value[0].name;
        myFormData.value.s_district = cityData.value[0].childs[0].name;
        citychange(myFormData.value.s_city);
      }
      const city = cityData.value.find(
        (item) => item.name === userInfo.value.s_city,
      );
      if (city) {
        county.value = city.childs;
        console.log(' county.value:', county.value);
      }
    }
  });
};
const citychange = (val) => {
  const city = cityData.value.find((item) => item.name === val);
  if (city) {
    county.value = city.childs;
    myFormData.value.s_district = city.childs[0].name;
  }
};
fetchAreaChilds();
const handleUpdateAvatar = (avatar) => {
  isChangeAvatar.value = true;
  upDateAvatar.value = avatar;
};
const handleUpdateAvater = () => {
  userAvatarRef.value.handleOpenUpdateMask();
};
const getEditUser = () => {
  // myFormData.value.grade == '高三'
  //   ? (myFormData.value.grade = '3')
  //   : myFormData.value.grade == '高二'
  //     ? (myFormData.value.grade = '2')
  //     : (myFormData.value.grade = '1');
  // myFormData.value.grade = store.getters.user.userInfo.grade;
  editUserLoading.value = true;
  delete myFormData.value.grade;
  EditUser(myFormData.value)
    .then((res) => {
      if (res.data.code == 20000) {
        myFormData.value.grade = store.getters.user.userInfo.grade;
        myFormData.value.grade == '3'
          ? (myFormData.value.grade = '高三')
          : myFormData.value.grade == '2'
            ? (myFormData.value.grade = '高二')
            : (myFormData.value.grade = '高一');

        isChangeAvatar.value = false;
        upDateAvatar.value = '';
        avatar.value =
          'https://mcdn.chatgk.com' + store.getters.user.userInfo.head;
        ElMessage({
          message: res.data.msg,
          type: 'success',
        });
        editUserLoading.value = false;
      } else {
        ElMessage.error(res.data.msg);
        editUserLoading.value = false;
      }
    })
    .catch(() => {
      editUserLoading.value = false;
    });
};
const handleAvatarSubmit = (imgUrl) => {
  myFormData.value.head = imgUrl;
  getEditUser();
};
const handleSubmit = () => {
  if (!isChangeAvatar.value) {
    myFormData.value.head = store.getters.user.userInfo.head;
    getEditUser();
  } else {
    userAvatarRef.value.handleChangeUpload();
  }
};
</script>

<style lang="scss" scoped>
#userInfo {
  .form-avatar {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: #f2f2f2;
    &::after {
      content: '修改';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      background: #999;
      color: #fff;
      text-align: center;
      font-size: 14px;
    }
    .inactive {
      width: 32px;
      height: auto;
      margin-top: 37px;
    }
  }
  .item {
    width: 100px;
  }
  .btns-box {
    width: 400px;
    .btn {
      height: 40px;
      width: 100%;
      margin-left: 100px;
      background-color: var(--background-color);
      color: var(--text-color);
    }
  }
}
</style>
<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
